<template>
  <header class="header flex-between">
    <template v-if="currentRouteName === 'index'">
      <button class="icon flex-center" @click="addSoftItem()" title="新">
        <i class="iconfont flex-center icon-add"></i>
      </button>
    </template>

    <!-- 打开新窗口 -->
    <button class="icon flex-center" @click="openNewWindow" title="新窗口">
      <i class="iconfont flex-center icon-add"></i>
    </button>

    <!-- 标题拖动 -->
    <div class="drag-header flex1 flex-center" :style="computedPaddingLeft">
      <transition name="header-fadein" v-if="platformWindows">
        <span :key="title" class="title-sty">顽皮猫脚手架 {{ title }} 1.0.0</span>
      </transition>
    </div>
    <button v-if="platformWindows" class="iconfont flex-center close-window" @click="updateVersion" title="更新">
      <i class="iconfont flex-center icon-refresh" style="font-size:26px"></i>
    </button>
    <!-- 右侧操作 -->
    <div class="operation-btn flex-items">
      <!-- 设置 -->
      <template v-if="currentRouteName === 'home'">
        <button class="icon flex-center" title="设置">
          <!--          <router-link class="flex-center" to="/setting">-->
          <!--            <i class="iconfont flex-center icon-setting"></i>-->
          <!--          </router-link>-->
        </button>
      </template>
      <!-- 最小化 -->
      <button v-if="platformWindows" class="iconfont flex-center close-window" @click="minWindow" title="关闭">
        <i class="iconfont flex-center icon-newopen" style="font-size:26px"></i>
      </button>
      <!-- 关闭 -->
      <button v-if="platformWindows" class="icon flex-center close-window" @click="closeWindow" title="关闭">
        <i class="iconfont flex-center icon-close"></i>
      </button>
    </div>
  </header>
</template>

<script lang="ts">
import { remote, ipcRenderer } from 'electron';
import { computed, defineComponent, ref } from 'vue';
import { onBeforeRouteUpdate, useRoute } from 'vue-router';
import { browserWindowOption } from '@/config';
import { createBrowserWindow, transitCloseWindow } from '@/utils';

export default defineComponent({
  emits: ['option-click', 'on-close', 'add-soft'],
  setup(props, { emit }) {
    const editorWinOptions = browserWindowOption('index');
    // 打开新窗口
    const openNewWindow = () => {
      createBrowserWindow(editorWinOptions, '/index');
    };

    // 获取窗口固定状态
    let isAlwaysOnTop = ref(false);
    const currentWindow = remote.getCurrentWindow();
    isAlwaysOnTop.value = currentWindow.isAlwaysOnTop();

    // 固定前面
    const drawingPin = () => {
      if (isAlwaysOnTop.value) {
        currentWindow.setAlwaysOnTop(false);
        isAlwaysOnTop.value = false;
      } else {
        currentWindow.setAlwaysOnTop(true);
        isAlwaysOnTop.value = true;
      }
    };

    const currentRouteName = ref(useRoute().name);

    // 获取首页的内边距
    const computedPaddingLeft = computed(() => {
      return currentRouteName.value === 'index' ? 'padding-left: 40px;' : '';
    });

    const title = ref(useRoute().meta.title as string);

    onBeforeRouteUpdate((to, from, next) => {
      title.value = to.meta.title as string;
      document.title = title.value;
      currentRouteName.value = to.name;
      next();
    });

    const clickOptions = () => {
      emit('option-click');
    };

    const addSoftItem = () => {
      emit('add-soft');
    };

    // 关闭窗口
    const closeWindow = () => {
      emit('on-close');
      localStorage.clear();
      transitCloseWindow();
    };

    // 最小化
    const minWindow = () => {
      ipcRenderer.send('window-min');
    };

    // 更新
    const updateVersion = () => {
      ipcRenderer.send('update', '更新...');
      ipcRenderer.send('window-close');
    };

    return {
      openNewWindow,
      currentRouteName,
      drawingPin,
      clickOptions,
      addSoftItem,
      closeWindow,
      minWindow,
      updateVersion,
      computedPaddingLeft,
      isAlwaysOnTop,
      title,
      // 只在windows上显示
      platformWindows: process.platform === 'win32'
    };
  }
});
</script>

<style lang="less" scoped>
.header-fadein-enter,
.header-fadein-leave-to {
  display: none;
  opacity: 0;
  animation: header-fadein 0.4s reverse;
}
.header-fadein-enter-active,
.header-fadein-leave-active {
  opacity: 0;
  animation: header-fadein 0.4s;
}

@keyframes header-fadein {
  from {
    opacity: 0;
    margin-right: -14px;
  }
  to {
    opacity: 1;
    margin-right: 0;
  }
}

.header {
  height: @iconSize;
  background-color: @white-color;
  button {
    padding: 0;
    outline: none;
    border: none;
    background-color: transparent;
  }
  a {
    color: initial;
    width: 100%;
    height: 100%;
    outline: none;
  }
  .icon {
    width: @iconSize;
    height: @iconSize;
    .iconfont {
      // 头部icon大小在这里设置
      font-size: @headerIconFontSize;
      padding-bottom: 2px;
    }
  }
  .close-window:hover {
    background-color: @error-color;
    color: @white-color;
  }
  @keyframes fades {
    30% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .drag-header {
    -webkit-app-region: drag;
    height: 36px;
    margin-top: 5px;
    padding-bottom: 5px;
    color: @text-sub-color;
    font-size: 15px;
    font-weight: bold;
    box-sizing: border-box;
  }
}
.thepin {
  width: 40px;
  height: 40px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s;
  .absolute-box {
    position: absolute;
    top: 0;
    transition: all 0.4s;
  }
}
.thepin-active .absolute-box {
  top: -40px;
}

.title-sty {
  background-image: -webkit-linear-gradient(left, #ed4014, #e6d205 25%, #147b96 50%, #e6d205 75%, #147bfb);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: maskedAnimation 4s infinite linear;
  font-size: 18px;
}
</style>
